<template>
  <div class="app-container">
    <div class="top clearfix">
      <el-select
        v-model="selected_webs"
        v-loading="websLoading"
        size="mini"
        placeholder="输出站点"
        clearable
        filterable
        style="width: 90%;"
        @change="handleSelectChange"
      >
        <el-option
          v-for="web in webs"
          :key="web.id"
          :label="web.domain"
          :value="web.id"
        />
      </el-select>
      <el-button
        type="warning"
        size="mini"
        title="管理站点"
        icon="el-icon-setting"
        @click="webVisible = true"
      />
      <el-button icon="el-icon-refresh" size="mini" title="刷新" type="info" @click="handleFetchWebs" />
      <wpaccount :web-visible="webVisible" @reload="handleFetchWebs" @closeWebDialog="webVisible=false" />
    </div>
    <div v-if="directoryVisable" class="content">
      <wpcategory :account_id="selected_webs" />
    </div>
  </div>
</template>

<script>
import wpaccount from '@/views/cms/elements/wpaccount'
import { Get as GetWebs } from '@/api/cms/wpaccount'
import wpcategory from '@/views/cms/elements/wpcategory'

export default {
  name: 'Wordpress',
  components: { wpaccount, wpcategory },
  data() {
    return {
      webs: [],
      selected_webs: '',
      websLoading: false,
      webVisible: false,
      directoryVisable: false
    }
  },
  created() {
    this.handleFetchWebs()
  },
  methods: {
    handleFetchWebs() {
      this.websLoading = true
      GetWebs()
        .then(response => {
          this.websLoading = false
          this.webs = response.data.data
        })
        .catch(e => {
          this.websLoading = false
        })
    },
    handleSelectChange() {
      console.log(this.selected_webs)
      if (this.selected_webs > 0) {
        this.directoryVisable = true
      } else {
        this.directoryVisable = false
      }
    }
  }
}
</script>

<style scoped>

</style>
